<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('二维码')"/>
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<style>
    img[src=""],img:not([src]){
        opacity: 0;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>快速生成二维码</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">跳转链接：</label>
                            <div class="col-sm-8">
                                <input type="text" id="text" class="form-control" placeholder="请输入跳转链接">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label font-noraml">图片预览</label>
                            <div class="col-sm-8 fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
                                    <img src="">
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file" id="photoFile"></span>
                                    <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                                </div>
                            </div>
                        </div>
                        <div class="from-group float-e-margins">
                            <p style="text-align: center">
                                <button class="btn btn-primary" onclick="upload('normal')" id="normal" type="button"><i class="fa fa-qrcode"></i>&nbsp;生成普通二维码</button>
                                <button class="btn btn-success" onclick="upload('logo')" id="logo" type="button"><i class="fa fa-qrcode"></i>&nbsp;生成logo二维码</button>
                                <button class="btn btn-warning" onclick="upload('color')" id="color" type="button"><i class="fa fa-qrcode"></i>&nbsp;生成彩色二维码</button>
                                <button class="btn btn-danger" onclick="upload('background')" id="background" type="button"><i class="fa fa-qrcode"></i>&nbsp;生成带背景二维码</button>
                                <button class="btn btn-info" onclick="upload('style')" id="style" type="button"><i class="fa fa-qrcode"></i>&nbsp;生成特殊形状二维码</button>
                                <button class="btn btn-primary" onclick="upload('imageFill')" id="imageFill" type="button"><i class="fa fa-qrcode"></i>&nbsp;生成图片填充二维码</button>
                                <button class="btn btn-success" onclick="upload('gif')" id="gif" type="button"><i class="fa fa-qrcode"></i>&nbsp;生成gif二维码</button>
                            </p>
                        </div>
                        <div class="form-group" style="text-align: center">
                            <img id="preview_photo" src="" width="200px" height="200px">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: jasny-bootstrap-js" />
<script th:inline="javascript">

    function uploadPhoto(){
        $("#photoFile").click();
    }


    function upload(flag){
        var formData = new FormData();
        formData.append("logoFile", document.getElementById("photoFile").files[0]);
        formData.append("text", document.getElementById("text").value);
        formData.append("flag", flag);
        $.ajax({
            url: "/qrcode/create",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            beforeSend: function (request) {
                request.setRequestHeader("X-Access-Token", storage.get("token"));
            },
            success: function (data) {
                $("#preview_photo").attr("src", "data:image/jpeg;base64,"+data);
            },
            error:function (data) {
                alert("上传失败！");
            }
        })
    }

</script>
</body>
</html>